<template>
	<view>
		<view class="tab-content">
			<slot />
		</view>
		<view class="tabbar">
			<view class="navigator">
				<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
					@click="switchTab(item,index)" v-if="($all.isPermissions('gzt') && item.text=='工作台') || ($all.isPermissions('sj') && item.text=='数据') || ($all.isPermissions('wd') && item.text=='我的')">
					<view class="" style="width: 42rpx;height: 42rpx;text-align: center;">
						<img :src="item.iconPath" :class="item.text=='数据'?'icon':item.text=='我的'?'icon2':'icon'" v-if="selectedIndex !== index">
						<img :src="item.selectedIconPath" :class="item.text=='数据'?'icon':item.text=='我的'?'icon2':'icon'" v-else>
					</view>
					<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props:{
			selectedIndex:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				// showselected: false,
				tabBar: {
					list: [{
						"pagePath": "pages/index/index",
						"iconPath": "../../static/tabbar/ic_use_n.png",
						"selectedIconPath": "../../static/tabbar/ic_use_p.png",
						"text": "工作台",
					}, {
						"pagePath": "pages/data/data",
						"iconPath": "../../static/tabbar/ic_data_n.png",
						"selectedIconPath": "../../static/tabbar/ic_data_p.png",
						"text": "数据"
					}, {
						"pagePath": "pages/my/my",
						"iconPath": "../../static/tabbar/ic_my_n.png",
						"selectedIconPath": "../../static/tabbar/ic_my_p.png",
						"text": "我的"
					}]
				},
			}
		},
		mounted() {
			if(uni.getStorageSync('selectedIndex')){
				// this.selectedIndex=uni.getStorageSync('selectedIndex') || 0
			}
			console.log(this.selectedIndex);
		},
		methods: {
			
			switchTab(item, index) {
				let url = '/' + item.pagePath
				let pagePath = url
				// uni.switchTab({
				// 	url
				// })
				this.$emit('clickTab',index)
				// this.selectedIndex=index
				// this.tabBar.list.forEach((v, i) => {
				// 	if (item.pagePath === v.pagePath) {
				// 		uni.setStorageSync('selectedIndex', index);
				// 	}
				// })
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 999;
		background: #fff;
		border-top: 2rpx solid #eee;

		.navigator {
			display: flex;
			justify-content: space-around;
			width: 85%;
			margin: 0 auto;
			padding-top: 15rpx;
		}

		.navigator-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			height: 100%;
		}

		.item-text {
			margin-top: 5rpx;
			color: #000;
			font-size: 24rpx;
		}

		.text-active {
			color: #166ffc !important;
		}

		.icon {
			width: 42rpx;
			height: 42rpx;
		}
		.icon1 {
			width: 42rpx;
			height: 42rpx;
		}
		.icon2 {
			width: 40rpx;
			height: 42rpx;
		}
	}
</style>